<template>
  <div class="header_box">
    <Row>
      <Col span="20">
        <div class="header_title">民润便利店管理系统</div>
      </Col>
      <Col>
        <div v-if="!user" class="user">
          <a class="link-a" href="#" @click="toScaning">扫码</a> | <a class="link-a" href="#"
                                                                      @click="toSelling">结账页面</a> | <a
            class="link-a">注册</a> | <a class="link-a"
                                         @click="toLogin">登录</a>
        </div>
        <div v-if="user" class="user">
          <Dropdown @on-click="dropdown">
            {{ user.name }} | {{ user.level }}
            <DropdownMenu slot="list" class="user_menu">
              <DropdownItem name="userdata">个人信息</DropdownItem>
              <DropdownItem name="changePassword">修改密码</DropdownItem>
              <DropdownItem divided name="logout">退出登录</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </Col>
    </Row>
    <changePassword :userId="user.userId" :showModal="showChange" @closeModal="changeModal = false"></changePassword>
    <!-- 修改密码 -->

    <userinfo :userdata="userData" :showModal="showUser" @closeModal="userModal = false"></userinfo>
    <!-- 用户信息 -->
  </div>
</template>
<script>
import {getKey} from '@/utils/utils'
import {mapActions, mapState} from 'vuex'
import changePassword from './handleHeader/changePassword.vue'
import userinfo from './handleHeader/userinfo.vue'

export default {
  components: {
    'changePassword': changePassword,
    'userinfo': userinfo,
  },
  data() {
    return {
      userData: {},  // 用户信息
      changeModal: false,
      userModal: false,
    }
  },
  computed: {
    showChange() {
      return this.changeModal
    },
    showUser() {
      return this.userModal
    },
    ...mapState({
      user: (state) => state.userModule.user
    })
  },
  beforeMount() {
    this.$store.commit('SET_USER', getKey('userinfo'))
  },
  methods: {
    toLogin() {
      this.$router.push({name: 'login'})
    },
    toSelling() {
      this.$router.push({name: 'sellingOrder'})
    },
    toScaning() {
      this.$router.push({name: 'scanCodePage'})
    },
    // toScan() {
    //   this.$router.push({name: 'scanCodePage'})
    // },

    // 获取用户信息
    async _getUserData() {
      const url = '/userinfo'
      const res = await this.GET_DATA({
        dataUrl: url,
        username: this.user.username
      })
      if (res) {
        this.userData = res.data.userInfo[0]
      }
      this.userModal = true
    },

    // 下拉列表
    dropdown(name) {
      const actions = {
        userdata: () => {
          this._getUserData()
        },
        changePassword: () => {
          this.changeModal = true
        },
        logout: () => {
          this.$Modal.confirm({
            title: '是否退出登录',
            // content: '是否退出登录',
            onOk: () => {
              this.toLogin()
            }
          })
        },
      }
      let aciton = actions[`${name}`]
      aciton.call(this)
    },
    ...mapActions({
      GET_DATA: '_GET_DATA'
    })
  },
  mounted() {
    let path = this.$route.query.path;
    if (path === 'scanCodePage') {
      this.toScaning();
    }
  },
}
</script>

<style>
.header_box {
  height: 10vh;
  padding-left: 80px;
  background-color: #515a6e;
  color: #fff;
}

.header_title {
  font-size: 28px;
  font-weight: bold;
  line-height: 80px;
}

.user {
  margin-top: 26px;
  font-size: 16px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  /* line-height: 80px; */
}

a.link-a {
  color: white !important;
}
</style>